<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>客户流失表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" href="../../css/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css"/>
	<style type="text/css">
		body{overflow-y: scroll;}
		.demoTable{width: 80%;height:50px;margin: 0 auto;text-align: center}
	</style>
</head>
<body style="margin: 20px;">

<div class="demoTable">
	搜索客户姓名：
	<div class="layui-inline">
		<input class="layui-input" name="id" id="demoReload" autocomplete="off">
	</div>
	<button class="layui-btn layui-btn-sm layui-bg-blue" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="customer" lay-filter="customer"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData">删除选中</button>
		<!--		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckLength"></button>-->
		<!--		<button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="isAll">验证是否全选</button>-->
<!--		<button class="layui-btn layui-btn-sm layui-bg-blue btn" lay-event="findAll" onclick="history.go(0)">查看全部流失客户</button>-->
<!--		<button class="layui-btn layui-btn-sm layui-bg-blue btn" lay-event="add">添加</button>-->
		<button class="layui-inline layui-btn layui-btn-primary layui-btn-sm btn" lay-event="refresh"
				onclick="history.go(0)" style="width: 30px;height: 30px">
			<i class="layui-icon layui-icon-refresh-3" style="color: #0000FF;padding: 3px 0 0 1px"></i></button>
	</div>
</script>

<script type="text/html" id="barDemo">
	<!--	<a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="show">查看</a>-->
	<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../js/jquery3.js" type="text/javascript" charset="utf-8"></script>

<script>
	function createTime(v){
		var date=new Date(v);
		var y=date.getFullYear();
		var m=date.getMonth();
		m=m<10?'0'+m:m;
		var d=date.getDate();
		d=d<10?'0'+d:d;
		var str=y+"-"+m+"-"+d;
		return str;
	}
	layui.use('table', function(){
		var table = layui.table;
		table.render({
			elem: '#customer'
			,url:'http://localhost:8080/crm/customerLoss/findAll'
			,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			,height:450
			,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title: '提示'
				,layEvent: 'LAYTABLE_TIPS'
				,icon: 'layui-icon-tips'
			}]
			,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			,cols: [[
				{type:'checkbox',fixed:'left',width: 80}
				,{field: 'id', title: '编号' ,fixed: true,width: 80}
				,{field: 'cusId', title: '客户编号',fixed: true,width: 100}
				,{field: 'cusName', title: '客户姓名', sort: true,fixed: true,width: 150}
				,{field: 'cusManger', title: '客户经理',width: 150}
				,{field: 'lastOrderTime', title: '最后下单时间',sort: true,width:180,
					templet:function (row) {
						return createTime(row.lastOrderTime);
					}}
				// ,{field: 'confirmLossTime', title: '确定流失时间', sort: true,width:135}
				,{field: 'lossReason', title: '流失原因', sort: true,width:350}
				// ,{field: 'createDate', title: '创建时间', sort: true,width:130}
				// ,{field: 'updateDate', title: '更新时间', sort: true,width:130}
				,{title:'操作', toolbar: '#barDemo', width:180,fixed: 'right'}
			]]
			,id: 'testReload'
			,page: true
			,done:function (res,curr,count) {
				layer.msg("操作成功，共查询到 "+count+" 个流失客户信息");
			}
		});

		//查找姓名
		var active = {
			reload: function(){
				var demoReload = $('#demoReload');

				//执行重载
				table.reload('testReload', {
					page: {
						curr: 1 //重新从第 1 页开始
					}
					,where: {
						key: demoReload.val()
					}
				}, 'data');
			}
		};

		$('.demoTable .layui-btn').on('click', function(){
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		})
		$('#demoReload').on('keypress',function () {
			var type = $('.demoTable .layui-btn').data('type');
			active[type] ? active[type].call(this) : '';
		})

		// 头工具栏事件
		table.on('toolbar(customer)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id);
			switch(obj.event){
				case 'getCheckData':
					var data = checkStatus.data;
					console.log(data)
					// layer.alert(JSON.stringify(data));
					layer.confirm('确定删除选中行吗', function (index) {
						// obj.del();
						layer.close(index);
						//向后台发送ajax请求
						$.ajax({
							//编写json格式，设置属性和值
							url: "http://localhost:8080/crm/customerLoss/deleteMany",
							contentType: "application/json;charset=utf-8",
							data:JSON.stringify(data),
							dataType: "json",
							type: "post",
							success: function (data) {
								//服务器端成功响应的json数据，进行解析
							}
						})
						//返回首页
						// history.go(0)
						location.reload();
					});
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：'+ data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选': '未全选');
					break;
				case 'add':
					layer.open({
						type:2,
						title:'<h1 style="font-size: 25px;text-align: center">添加流失客户</h1>',
						shadeClose:true,
						shade:0.6,
						area:['1100px','65%'],
						shadowColor:false,
						content:'CustomerLossForm.html'
					});
					break;

					//自定义头工具栏右侧图标 - 提示
				case 'LAYTABLE_TIPS':
					layer.alert('这是工具栏右侧自定义的一个图标按钮');
					break;
			};
		});

		//监听行工具事件
		table.on('tool(customer)', function(obj){
			var data = obj.data;
			//console.log(obj)
			if(obj.event === 'del'){
				console.log("操作：" + obj.event);
				layer.confirm('确定删除该行吗', function (index) {
					obj.del();
					layer.close(index);
					console.log("删除的id是："+data.id);
					//向后台发送ajax请求
					$.ajax({
						//编写json格式，设置属性和值
						url: "http://localhost:8080/crm/customerLoss/delete?id=" + data.id,
						contentType: "application/json;charset=utf-8",
						dataType: "json",
						type: "post",
						success: function (data) {
							//服务器端成功响应的json数据，进行解析
						}
					})
				});
			} else if(obj.event === 'edit'){
				console.log("操作：" + obj.event);
				layer.open({
					type: 2,
					title: '<h1 style="font-size: 25px;text-align: center">编辑客户</h1>',
					shadeClose: true,
					shade: 0.6,
					area: ['600px', '65%'],
					shadowColor: false,
					content: 'CustomerLossForm.html',
					success: function(layero, index) {
						var body = layer.getChildFrame('body', index);
						body.find('#cusId').val(data.cusId);
						body.find("#cusName").val(data.cusName);
						body.find("#cusManger").val(data.cusManger);
						//给id赋值
						body.find('#id').val(data.id);
					}
				});
			}else if(obj.event=== 'show'){
				console.log("操作："+obj.event);
			}
		});
	});
</script>

</body>
</html>
